<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script>
    const provinces = [
      {id: 1, title: '湖北'},
      {id: 2, title: '广东'},
      {id: 3, title: '江苏'}
    ]
    const cities = [
      {id: 11, title: '武汉', parentId: 1},
      {id: 12, title: '孝感', parentId: 1},
      {id: 13, title: '襄阳', parentId: 1},
      {id: 14, title: '宜昌', parentId: 1},
      {id: 15, title: '广州', parentId: 2},
      {id: 16, title: '深圳', parentId: 2},
      {id: 17, title: '南京', parentId: 3},
      {id: 18, title: '苏州', parentId: 3},
      {id: 19, title: '常州', parentId: 3}
    ]
    const areas = [
      {id: 51, title: '汉川', parentId: 12},
      {id: 52, title: '孝南', parentId: 12},
      {id: 53, title: '云梦', parentId: 12}
    ]


    window.onload = async function () {
      // Promise实现
      /*

      getProvince()
      .then(res => {
        console.log(res)
        return getCity(res[0].id)
      })
      .then(res => {
        console.log(res)
        return getArea(res[1].id)
      })
      .then(res => {
        console.log(res)
      })
      */


      //Promise.all实现
      /*
      Promise.all([getProvince(), getCity(1), getArea(12)]).then(res => {
        console.log(res)
      })
      */



      // async/await实现
      let p1 = await getProvince()
      console.dir(p1)
      let p2 = await getCity(p1[0].id)
      console.dir(p2)
      let p3 = await getArea(p2[1].id)
      console.dir(p3)
    }






    // 获取数据方法
    function getProvince() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(provinces)
        }, 1000)
      })
    }
    function getCity(id) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(cities.filter(a => a.parentId === id))
        }, 1000)
      })
    }
    function getArea(id) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(areas.filter(a => a.parentId === id))
        }, 1000)
      })
    }
  </script>
</body>
</html>